<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../react18/react.development.js"></script>
    <script src="../react18/react-dom.development.js"></script>
</head>
<body>
    <div id="app"></div>
    <script>
        /*
        React对象上有一个createElement方法可以创建虚拟DOM
          -参数1: 元素名称
          -参数2: 元素上的属性,对象类型
          -参数3(3及其以后的参数): ..n:都是元素的子节点(可以是内容也可以是子元素的结构)
        */

        // 案例1
        // const vDOM = React.createElement("div",{className: "outer"},"hello vDOM")
        // 案例2
        // const vDOM = React.createElement("div",{className: "outer"},React.createElement("h1",{},"React"),React.createElement("p",{},"写得太好了"))
        // 案例3
        const vDOM = React.createElement("div",{className: "outer"},"React","写得太好了")
        // 构建容器并渲染虚拟DOM
        // ReactDOM.createRoot(document.getElementById("app")).render(vDOM)
        //用createRoot方法获取容器,render方法把虚拟DOM渲染到页面上
        ReactDOM.creatRoot(document.getElementById("app")).render(vDOM)
    </script>
</body>
</html>